<%@ page import="java.util.NavigableSet" %>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LoveU-注册</title>
    <link rel="shortcut icon" href="<%=basePath%>/img/男女混合.png" type="image/x-icon">
    <link rel="stylesheet" href="<%=basePath%>/css/register.css">
    <script src="<%=basePath%>/js/jquery-3.6.3.min.js"></script>
    <script src="<%=basePath%>/js/jquery.validate.min.js"></script>
    <style>
        .footer {
            box-sizing: border-box;
            position: absolute;
            bottom: 40px;
            width: 100%;
            height: 45px;
            text-align: center;
            font-size: 15px;
            font-weight: 600;
            color: #666;
            line-height: 37px
        }

        @font-face {
            font-family: "Soph";
            src: url("LucySaidOkPersonalUseItalic-OV9ee.ttf");
        }

        .footer span {
            font-family: "Soph";
            color: #d34e6d;
            font-size: 45px;
        }

        .footer a {
            text-decoration: none;
            color: #d34e6d;
        }
    </style>
</head>

<body>
<form action="UserServlet?method=register" method="post" id="registerForm" enctype="multipart/form-data">
    <p class="title">Register</p>

    <div class="inputBox">
        <input type="text" placeholder="name" id="name" name="name">
    </div>
    <div class="inputBox">
        <input type="password" placeholder="password" id="password" name="password">
    </div>
    <div class="inputBox">
        <input type="text" id="inputCode" name="inputCode" placeholder="请输入验证码">
        <%--  注意：图片的地址是一个servlet --%>
        <img src="GifCaptchaUtil" id="autoCode" onclick="changeCode()">
    </div>
    <div class="buttom">
        <input type="submit" value="Register">
        <input type="reset" value="Reset">
    </div>
    <span style="color: red">${resultVO}</span>
</form>
<div class="footer">
    <span>Love Sophie</span>
    <p>Copyright © 2016-2018 <a href="">Power by Rowena</a></p>
</div>

<script>
    $(function () {
        // 在键盘按下并释放及提交后验证提交表单
        $("#registerForm").validate({
            //规则
            rules: {
                name: {required: true, rangelength: [2, 10]},
                password: {required: true, rangelength: [6, 15]},
                inputCode: {required: true}
            },
            //错误提示消息
            messages: {
                name: {required: "请输入用户名!", rangelength: "用户名长度在5到10之间!"},
                password: {required: "请输入密码！", rangelength: "密码长度在6到15之间"},
                inputCode: {required: "请输入验证码！"}
            }
        });
    })

    function changeCode() {
        document.querySelector("#autoCode").src = "GifCaptchaUtil?randomTime=" + new Date().getTime();
    }

</script>
</body>

</html>